<script setup lang="ts">
    import { ref, reactive, onMounted } from 'vue';
    import { LastCommentItem } from '@/services/type';
    import { api } from '@/services/api';
    import { CommentWayEnum } from '@/enums';

    import moment from 'moment';
    import Sidebar from '@/views/Sidebar/index.vue';

    // 评论数据
    const commentData = reactive<LastCommentItem[]>([]);
    // 初始化正在加载中
    const loading = ref(true);

    onMounted(async () => {
        // 获取最近评论信息
        const response = await api.common.getLastComment()
        // 如果状态返回失败
        if(response.code !== 0) return; 
        // 结果赋值
        commentData.push(...response.data);
        // 加载结束
        loading.value = false;
    });

</script>
<template>
    <sidebar title="最新评论">
        <template #content>
            <el-skeleton :loading="loading" :rows="3" animated>
                <template #template>
                    <div class="temp-box" style="display: flex;">
                        <div class="temp-img" style="margin-right: 10px;border-radius: 8px;">
                            <el-skeleton-item variant="image" style="width: 38px; height: 38px" />
                        </div>
                        <div class="temp-text" style="width: 100%;">
                            <el-skeleton-item variant="text" style="width: 30%;margin-top: 10px;" />
                            <el-skeleton-item variant="text" style="width: 20%;" />
                            <el-skeleton-item variant="text" />
                        </div>
                    </div>
                </template>
                <template #default>
                    <div class="comment-box">
                        <ul class="comment-list">
                            <li class="comment-item" v-for="(item, index) in commentData" :key="index">
                                <div class="user-icon">
                                    <img :src="item.comment_user_info.avatar"/>
                                </div>
                                <div class="comment-main-body">
                                    <div class="comment-title">
                                        <span class="title">
                                            <user-card :yhnm=" item.comment_user_info.yhnm">
                                                <a :href="'/u/' + item.comment_user_info.yhnm" target="_blank">{{ item.comment_user_info.nickName }}</a>
                                            </user-card>
                                        </span>
                                        <span class="point"></span>
                                        <span class="time">{{ moment(item.comment_time).startOf('minute').fromNow() }}</span>
                                    </div>
                                    <div class="comment-content">
                                        <!-- 文章评论 -->
                                        <a v-if="item.type === CommentWayEnum.AERICLE" class="comment-url" :href="'/blog/detail/' + item.wznm + '#comment-' + item.comment_id" v-html="item.content"></a>
                                        <!-- 友情链接评论 -->
                                        <a v-if="item.type === CommentWayEnum.LINKS" class="comment-url" :href="'/links#comment-' + item.comment_id" v-html="item.content"></a>
                                        <!-- 关于我评论 -->
                                        <a v-if="item.type === CommentWayEnum.ABOUTME" class="comment-url" :href="'/aboutMe#comment-' + item.comment_id" v-html="item.content"></a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </template>
            </el-skeleton>
        </template>
    </sidebar>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />